<template>
  <el-descriptions :title="title" :direction="direction" :column="column" :border="border">
    <el-descriptions-item
      v-for="(item, index) in titleData"
      :key="index"
      :color="item.color || color"
      :icon="item.icon || icon"
      :span="item.span"
      :contentStyle="contentStyle"
      :labelStyle="labelStyle"
      :label="item.label"
      >{{ data[item.field || item.prop] }}</el-descriptions-item
    >
  </el-descriptions>
</template>

<script>
export default {
  name: "descriptions",
  props: {
    title: String,
    direction: String,
    column: {
      type: Number,
      default: 3,
    },
    color: String,
    icon: String,
    labelStyle: Object,
    contentStyle: Object,
    border: {
      type: Boolean,
      default: true,
    },
    data: Object,
    titleData: Array,
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  mounted() {},
  methods: {},
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.el-descriptions {
  margin-bottom: 20px;
}
</style>
